import type { PropsWithChildren, FC } from "react";
import { NavLink } from "react-router-dom";
import { memo } from "react";
import { Tooltip } from "antd";
interface Item {
  id: number;
  avatar: string;
  name: string;
  time?: string;
  message?: string;
  lastMessageTime?: string;
  messageSendType?: boolean;
  noMessageNum?: number;
  type?: "friend" | "group";
  messageType?: "data" | "img" | "video" | "voice";
}
interface CardProps {
  item: Item;
  className?: string;
  urlParms?: object;
  controls: {
    isshowtime?: boolean;
    isshowmessage?: boolean;
    isnav?: boolean;
  };
  handelClick?: (data: Item) => void;
}
const Card: FC<PropsWithChildren<CardProps>> = props => {
  const { item } = props;
  const style =
    " flex flex-row items-center p-[10px] h-[60px] bg-black/5 hover:bg-black/10 border-b-[1px] ";
  const CaedNoNav = () => {
    return (
      <div className={style + props.className} key={item.id}>
        <img className="h-8 w-8" src={item.avatar} alt="avatar" />
        <div className="ml-2 flex flex-col flex-shrink-1 justify-center flex-1 w-[calc(100%-40px)] relative">
          <div className="flex justify-between text-sm text-start">
            {item.name?.length > 4 ? (
              <Tooltip title={item.name} color="#87d068" key="#87d068">
                <div className="max-w-[55px] truncate whitespace-nowrap overflow-hidden">
                  {item.name}
                </div>
              </Tooltip>
            ) : (
              <div className=" max-w-[55px] truncate whitespace-nowrap overflow-hidden">
                {item.name}
              </div>
            )}
            {props.controls.isshowtime ? (
              <span className="text-[10px] text-gray-500">{item.time}</span>
            ) : (
              <></>
            )}
          </div>
          {props.controls.isshowmessage ? (
            <div className="text-[10px] text-gray-500 clamp-1 text-start whitespace-nowrap text-ellipsis overflow-hidden break-all">
              {item.message}
            </div>
          ) : (
            <></>
          )}
          {item.noMessageNum ? (
            <i className="absolute right-0 -translate-y-[4px] top-3/4 z-10 w-2 h-2  bg-red-600 rounded-full text-white text-[8px] flex justify-center items-center">
              {item.noMessageNum}
            </i>
          ) : (
            <></>
          )}
        </div>
        {props.children}
      </div>
    );
  };

  return (
    <>
      {props.controls?.isnav ? (
        <NavLink
          onClick={() => props.handelClick && props.handelClick(item)}
          to={`detail/${item.type ? item.type + "-" + item.id : item.id}`}
          style={({ isActive }) => {
            return {
              fontWeight: isActive ? "bold" : ""
            };
          }}
        >
          <CaedNoNav></CaedNoNav>
        </NavLink>
      ) : (
        <CaedNoNav></CaedNoNav>
      )}
    </>
  );
};

export default memo(Card);
